<template>
  <div class="permission">
    <slot v-if="isPermission"></slot>
    <slot v-else name="otherwise">
      <a-result status="403" title="403" sub-title="Sorry, you are not authorized to access this page.">
        <template #extra>
          <router-link to="/">
            <a-button type="primary">Back Home</a-button>
          </router-link>
        </template>
      </a-result>
    </slot>
  </div>
</template>
<script lang="ts">
import { computed, ComputedRef, defineComponent, PropType } from 'vue'
import { StateType as UserStateType } from '@/store/user/typing'
import { hasPermissionRouteRoles } from '@/utils/routes'
import { useUserStore } from '@/store/user'

interface PermissionSetupData {
  isPermission: ComputedRef<boolean>
}

export default defineComponent({
  name: 'Permission',
  props: {
    roles: {
      type: [String, Array] as PropType<string[] | string>,
      default: () => {
        return []
      },
    },
  },
  setup(props): PermissionSetupData {
    const userStore = useUserStore()

    // 是否有权限
    const isPermission = computed(() => hasPermissionRouteRoles(userStore.currentUser.roles, props.roles))

    return {
      isPermission,
    }
  },
})
</script>
<style lang="less" scoped>
.permission {
  position: relative;
  width: inherit;
  height: 100%;
  padding: 16px;
}
</style>
